<template>
  <div id="subpage">
    <el-col :span="24" class="warp-breadcrum">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item to="/dashboard/index">
          <b>平台数据</b>
        </el-breadcrumb-item>
        <el-breadcrumb-item>楼盘管理</el-breadcrumb-item>
        <el-breadcrumb-item>客服列表</el-breadcrumb-item>
      </el-breadcrumb>
    </el-col>
    <div class="content">
      <div class="xcx-head">
        <div style="display: flex">
          <span>客服列表</span>
        </div>
        <div style="display: flex">
          <el-button @click="add()" size="small" icon="el-icon-plus" type="success">添加客服</el-button>
        </div>
      </div>
      <div class="search-box mt10">
        <el-form :inline="true">
          <el-form-item>
            <el-input placeholder="名称" v-model="search.keys"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input placeholder="手机" v-model="search.mobile"></el-input>
          </el-form-item>
          <el-form-item>
            <el-select v-model="search.house_id" placeholder="请选择">
              <el-option v-for="item in houseData" :key="item.id" :label="item.title" :value="item.id"
                placeholder="请选择">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="search.status" placeholder="状态">
              <el-option label="不限" :value="0"></el-option>
              <el-option label="正常" :value="1"></el-option>
              <el-option label="锁定" :value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button @click="getIndex()" icon="el-icon-search" type="primary">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button @click="getClearIndex()" icon="el-icon-delete" type="info">清空筛选</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="xcx-content">
        <!--列表-->
        <el-table border :data="tableData" stripe size="small" style="width: 100%" v-loading="loading">
          <el-table-column align="center" prop="id" label="ID" width="100"></el-table-column>
          <el-table-column prop="house_name" label="所属楼盘" width="260"></el-table-column>
          <el-table-column align="center" prop="created_at" width="160" label="头像">
            <template slot-scope="scope">
              <el-image class="mr10" style="width: 30px; height: 30px;border-radius: 50%;" :src="scope.row.headimg" fit="fill"></el-image>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="title" label="客服名称" width="160"></el-table-column>
          <el-table-column align="center" prop="mobile" label="手机号" width="*"></el-table-column>
          <el-table-column align="center" prop="orders" width="160" label="排序"></el-table-column>
          <el-table-column align="center" label="状态" width="100">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.flag" :active-value="1" :inactive-value="0"
                @change="setStatus(scope.row)"></el-switch>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="created_at" width="160" label="添加时间"></el-table-column>
          <el-table-column align="center" label="操作" width="200">
            <template #default="scope">
              <el-button plain icon="el-icon-edit" size="mini" type="primary" @click="edit(scope.row.id)">编辑</el-button>
              <el-button plain icon="el-icon-delete" size="mini" type="danger"
                @click="del_item(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--分页-->
        <div class="paging">
          <el-pagination class="left" @current-change="handleCurrentChange" :current-page="page" background
            layout="total, prev, pager, next" :total="count"></el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      loading: false,
      tableData: [],
      houseData: [],
      page: 0,
      count: 0,
      limit: 10,
      search: {
        keys: "",
        mobile: "",
        status: 0,
        house_id: "",
      },
    };
  },
  //进入页面加载
  mounted: function () {
    var that = this;
    that.getList();
    that.getHouse();
  },
  methods: {

    getHouse() {
      var that = this;
      that.axios.post("/getHouse").then((res) => {
        if (res.code == 200) {
          that.houseData = res.data;
        }
      });
    },

    add() {
      this.$router.push("/service/add");
    },
    edit(ids) {
      this.$router.push({
        path: "/service/add",
        query: {
          id: ids,
        },
      });
    },

    setStatus(row) {
      var that = this;
      that.axios
        .post("/service/setStatus", { id: row.id, status: row.flag })
        .then((res) => {
          this.$message({
            type: "success",
            message: res.msg,
          });
        });
    },
    /**
     * 下一页
     */
    handleCurrentChange(currentPage) {
      var that = this;
      that.page = currentPage;
      that.getList();
    },

    del_item(ids) {
      let that = this;
      this.$confirm("此操作不可逆, 是否继续?", "温馨提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        that.axios
          .post("/service/destroy", {
            ids: ids,
          })
          .then((res) => {
            this.$message({
              type: res.code == 200 ? "success" : "info",
              message: res.msg,
            });
            that.getList();
          });
      });
    },

    getIndex() {
      this.getList();
    },

    getClearIndex() {
      this.search.keys = "";
      this.search.mobile = "";
      this.search.status = 0;
      this.search.house_id = "";
      this.getList();
    },

    /**
     * 获取列表
     */
    getList() {
      let that = this;
      let formData = that.search;
      var curr_page = sessionStorage.getItem("curr_page");
      that.loading = true;
      that.page = curr_page ? curr_page - 0 : that.page;
      formData.page = that.page;
      formData.limit = that.limit;
      that.axios.post("/service/index", formData).then((res) => {
        if (res) {
          that.tableData = res.data.data;
          that.count = res.data.total;
          that.page = curr_page ? curr_page : that.page;
          curr_page ? sessionStorage.removeItem("curr_page") : "";
          that.loading = false;
        }
      });
    },
  },
};
</script>
<style></style>